<!DOCTYPE html>
<html>
	<head>
		<title>幻灯片</title>
		<meta charset="utf-8"></meta>
	</head>
	<style>
		.sl img{
			width:100px;
			height:100px;
		}
		.gd{
			background-color:rgba(0,0,0,0.7);
			position:absolute;
			z-index:998;
			display:none;
		}
		.sl{
			position:absolute;
			z-index:888;
		}
		.yt{
			z-index:999;
			position:absolute;
			display:none;
			text-align:center;
		}
		.wz{
			background-color: white;
			margin-top:-4px;
		}
		a{
			margin-left:20px;
			text-decoration:none;
		}
	</style>
	<body>
		<div class="sl">
			<img src="../img/1.jpg"/>
			<img src="../img/2.jpg"/>
			<img src="../img/3.jpg"/>
			<img src="../img/4.jpg"/>
		</div>
		<div class="gd"></div>
		<div class="yt">
			<div class="tp">
				<img src="images/1.jpg"/>
			</div>
			<div class="wz">
				<a href="#">pre</a><a href="#" >next</a>
			</div>
		</div>
	</body>
	<script src="../lib/jquery-3.5.1.js"></script>
	<script>
			var max = $(".sl img").length;
			var index ;
			$(function(e){
				var width=$(window).width();
				var height=$(window).height();
				$(".gd").css({"height":height,"width":width});
				
				$(".sl img").click(function(e){
					$(".gd").show(500);
					$(".yt").fadeIn(800);
					 index = $(this).index();
					$(".tp img").attr({"src":"../img/"+(index+1)+".jpg","height":height*0.8}).css({"marginTop":height*0.1,"marginBottom":height*0.1,"marginLeft":width*0.2,"marginRight":width*0.2});
				});
				
				
				$("a:eq(0)").click(function(e){
					if(index-1<0){
						index = max-1;
					}else{
						index = index-1;
					}
					$(".tp img").attr("src","../img/"+(index+1)+".jpg");
				});
				
				$("a:eq(1)").click(function(e){
					if(index+1==max){
						index = 0;
					}else{
						index = index+1;
					}
					$(".tp img").attr("src","../img/"+(index+1)+".jpg");
				});
				
				$(".gd").click(function(){
					$(".gd").hide(800);
					$(".yt").fadeOut(500);
				});
			})
	</script>
</html>